<?php

use \app\assets\AppAsset;

AppAsset::addCss($this, '/css/page/admin-user-index.css');
?>

<el-header class="top-wrapper" height="auto">
    <el-row :inline="true" class="button-container">
        <el-col :xs="9" :sm="7" :md="6" :lg="5">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <a><i class="el-icon-location-outline"></i>&nbsp;首页</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>操作员管理</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col :xs="15" :sm="17" :md="18" :lg="19" class="text-right">
            <el-button class="" size="mini" type="success"
                       @click.native="goToCreate()">
                新建
            </el-button>
            <el-dropdown size="mini">
                <el-button type="primary" size="mini">
                    更多操作
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item size="mini"
                                      @click.native="openItem(null)">
                        批量恢复
                    </el-dropdown-item>
                    <el-dropdown-item size="mini"
                                      @click.native="disabledItem(null)"
                                      divided>
                        批量禁用
                    </el-dropdown-item>
            </el-dropdown>
        </el-col>
        <el-col class="padding-top-10" style="display: none;">
            <!-- 提醒 START -->
            <div class="tip no-margin-top">
                <el-collapse v-model="setting.activeNotice" accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <i class="el-icon el-icon-info"></i>
                            &nbsp;&nbsp;
                            <span class="title">
                                        温馨提示
                                    </span>
                        </template>
                        <div class="content">
                            <p>
                                1、一些小提示: 我是提示；
                                一些小代码：<code>我是小代码</code>
                            </p>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 提醒 END -->
        </el-col>
    </el-row>
    <el-form :inline="true" :model="searchForm" @submit.native.prevent
             class="search-container with-space-no">
        <el-form-item label="筛选："  class="padding-right-30">
            <el-radio-group size="mini" v-model="searchForm.status"
                            @change="getList(false)">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button :label="key"
                                 v-for="(item, key) in setting.statusTxt">
                    {{item}}列表
                </el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="" class="padding-right-30" v-if="setting.searchBarWidth >= 995">
            <el-select v-model="searchForm.role_id"
                       size="small" placeholder="请选择角色"
                       style="width: 130px;">

                <el-option :label="item.name" :value="item.id"
                           v-for="(item, key) in roleList"></el-option>

            </el-select>
        </el-form-item>
        <el-form-item label="" class="">
            <el-input placeholder="请输入内容" v-model="searchTopValue" size="small"
                      class="input-with-select vert-align-init" type="text"
                      size="small">
                <el-select v-model="searchTopType" slot="prepend"
                           size="small" placeholder="请选择"
                           style="width: 130px;">

                    <el-option label="编号" value="id"></el-option>
                    <el-option label="昵称" value="nick_name"></el-option>
                    <el-option label="账号" value="user_name"></el-option>

                </el-select>
            </el-input>
        </el-form-item>
        <el-form-item label="">

            <el-button type="primary" icon="el-icon-search"
                       size="small" @click="getList">
                搜索
            </el-button>
        </el-form-item>
        <el-form-item label="" class="el-form-item-more with-auto"
                      v-show="setting.searchBarWidth < 995">
            <el-button type="text" @click="moreSearchClick">
                            <span v-if="!setting.showAllSearch">
                                更多&nbsp;<i class="w-icon-dowMore"></i>
                            </span>
                <span v-else>
                                隐藏&nbsp;<i class="w-icon-upClose"></i>
                            </span>
            </el-button>
        </el-form-item>
        <el-collapse-transition>
            <div v-show="setting.showAllSearch" id="searchAllAni"
                 class="more-search-container">
                <!-- 此处添加[el-form-item] -->
                <el-form-item label="角色过滤" v-if="setting.searchBarWidth < 995">
                    <el-select v-model="searchForm.role_id"
                               size="small" placeholder="请选择角色"
                               style="width: 130px;">

                        <el-option :label="item.name" :value="item.id"
                                   v-for="(item, key) in roleList"></el-option>

                    </el-select>
                </el-form-item>
            </div>
        </el-collapse-transition>
    </el-form>
</el-header>
<el-main class="content-wrapper transits">
    <!-- 主列表 表格 START -->
    <el-table :data="dataList" style="width: 100%" class=""
              @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column fixed prop="id" label="编号" width="100">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="light" :content="scope.row.id"
                            placement="top-start">
                    <div class="text-more-ellipsis">
                        <span v-text="scope.row.id" class="pointer"></span>
                    </div>
                </el-tooltip>
            </template>
        </el-table-column>

        <el-table-column fixed prop="user_name" label="账号">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="light" :content="scope.row.user_name"
                            placement="top-start">
                    <div class="text-more-ellipsis">
                        <span v-text="scope.row.user_name" class="pointer"></span>
                    </div>
                </el-tooltip>
            </template>
        </el-table-column>

        <el-table-column fixed prop="nick_name" label="昵称">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="light" :content="scope.row.nick_name"
                            placement="top-start">
                    <div class="text-more-ellipsis">
                        <span v-text="scope.row.nick_name" class="pointer"></span>
                    </div>
                </el-tooltip>
            </template>
        </el-table-column>

        <el-table-column fixed prop="role_name" label="所属角色" width="120">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="light" :content="scope.row.role_name"
                            placement="top-start">
                    <div class="text-more-ellipsis">
                        <span v-text="scope.row.role_name" class="pointer"></span>
                    </div>
                </el-tooltip>
            </template>
        </el-table-column>

        <el-table-column prop="update_time" label="修改时间" width="120">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="light"
                            :content="scope.row.update_time_text"
                            placement="top-start">
                    <div class="text-more-ellipsis">
                                    <span v-text="scope.row.update_time_text_s"
                                          class="pointer"></span>
                    </div>
                </el-tooltip>
            </template>
        </el-table-column>

        <el-table-column prop="status_text" label="状态" width="80">
            <template slot-scope="scope">
                <div class="text-more-ellipsis">
                                <span v-if="scope.row.status == setting.status.disabled"
                                      v-text="scope.row.status_text" class="pointer text-danger"></span>
                    <span v-else v-text="scope.row.status_text" class="pointer"></span>
                </div>
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
                <el-button type="text" size="small"
                           @click.native="goToUpdate(scope.row.id)">编辑
                </el-button>
                <el-button type="text" size="small"
                           @click.native="changePwd(scope.row.id)">改密
                </el-button>
                <el-button type="text text-danger" size="small"
                           v-if="scope.row.status != setting.status.disabled"
                           @click.native="disabledItem(scope.row.id)">禁用
                </el-button>
                <el-button type="text text-success" size="small" v-else
                           @click.native="openItem(scope.row.id)">开启
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 主列表 表格 END -->

    <!-- 分页 START -->
    <div class="block pagination">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="20"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal">
        </el-pagination>
    </div>
    <!-- 分页 END -->
</el-main>

<?= AppAsset::addScript($this, '/js/page/admin-user-index.js'); ?>
<?= $this->registerJs('
    new app();
'); ?>
